import React, { useState, useEffect } from 'react'
import { 
  Table,
  Button, 
  Drawer,
  Form,
  Input, 
  Select, 
  Tree, 
  message, 
  Tag, 
  Space,
  Modal,
  Checkbox
} from 'antd'
import menus from './../../router/Menus'
import { adminAdd, getAdminList, getAdminDetail, updateAdmin } from './../../api/admin'
menus.splice(0, 1)
function AdminList() {
  const [adminlist, setAdminlist] = useState([])

  useEffect(() => {
    getAdminList().then(res => {
      setAdminlist(res.data.data)
    })
  }, [])


  const [visible, setVisible] = useState(false)
  const [adminname, setAdminname] = useState('')
  const [password, setPassword] = useState('')
  const [role, setRole] = useState(1)
  const [checkedKeys, setCheckedKeys] = useState([])
  const columnsarr = [
  { title: '序号', render: (text, record, index) => <span>{ index + 1}</span>},
  { title: '管理员账号', dataIndex: 'adminname', key: 'adminname'},
  { title: '角色', dataIndex: 'role', key: 'role',
    render: (text) => {
      return text === 2 ? <Tag color="orange">超级管理员</Tag> : <Tag >管理员</Tag>
    }
  },
  { title: '操作', render: (text, record, index) => {
    return record.adminname === 'admin' ? <span>你还想干啥</span> : <Space>
      <Button type="dashed" onClick={ () => updateInfo(record.adminname) }>编辑</Button>
      <Button danger>删除</Button>
    </Space>
  }}
  ]
  const [  columns, setColumns ] = useState(columnsarr)
  const addAdmin = () => {

    adminAdd({
      adminname,
      password,
      role,
      checkedKeys
    }).then(res => {

      if (res.data.code === '10004') {
        message.warning('该管理员账号已存在')
      } else {
        setAdminname('')
        setRole(1)
        setCheckedKeys([])
        setVisible(false)
      }
    })
  }

  // 编辑
  const [ updateFlag, setUpdateFlag ] = useState(false)
  const updateInfo = (adminname) => {
    getAdminDetail({ adminname }).then(res => {

      setAdminname(res.data.data[0].adminname)
      setRole(res.data.data[0].role)
      setCheckedKeys(res.data.data[0].checkedKeys)
      setUpdateFlag(true)
    })
    
  }

  const [ flag, setFlag ] = useState(true)
  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>添加管理员</Button>
      <Checkbox checked={flag} onChange={ (e) => {

        if (e.target.checked) {
          setColumns(columnsarr)
        } else {
          columnsarr.splice(2, 1)
          setColumns(columnsarr)
        }
        setFlag(e.target.checked)
      }}>角色</Checkbox>
      <Table 
      dataSource = { adminlist }
      columns = { columns }
      rowKey = 'adminid'/>
      <Drawer
        title="添加管理员"
        width="600"
        placement="right"
        closable={true}
        onClose={ () => setVisible(false)}
        visible={ visible }
        footer={
          <div
            style={{
              textAlign: 'right',
            }}
          >
            <Button type="primary" onClick={ addAdmin }>
              添加
            </Button>
          </div>
        }
      >
        <Form>
          <Form.Item>
            <Input placeholder="请输入管理员账号" onChange = { (e) => {
              setAdminname(e.target.value)
            }}></Input>
          </Form.Item>
          <Form.Item >
            <Input.Password placeholder="请输入管理员密码" onChange = { (e) => {
              setPassword(e.target.value)
            }}/>
          </Form.Item>
          <Form.Item >
            <Select defaultValue={1} onChange = { (value) => {
              setRole(value)
            }}>
              <Select.Option value={2}>超级管理员</Select.Option>
              <Select.Option value={1}>管理员</Select.Option>
            </Select>
          </Form.Item>
        </Form>
        {/* 树形菜单 */}
        <Tree
          checkable
          defaultExpandAll = { true }
          treeData={ menus }
          onCheck={ (checkedKeys, info) => {

            setCheckedKeys(checkedKeys)
          }}
        />  
      </Drawer>
      <Modal 
        title="修改管理员权限"
        visible = { updateFlag }
        onOk={ () => {
          updateAdmin({
            adminname,
            role,
            checkedKeys
          }).then(res => {
            setAdminname('')
            setRole(1)
            setCheckedKeys([])
            setUpdateFlag(false)
          })
          
        }}
        onCancel={ () => {
          setUpdateFlag(false)
        }}
      >
        <Form>
          <Form.Item>
            <Input value={ adminname } disabled placeholder="请输入管理员账号" onChange = { (e) => {
              setAdminname(e.target.value)
            }}></Input>
          </Form.Item>
          <Form.Item >
            <Select value={ role } defaultValue={1} onChange = { (value) => {
              setRole(value)
            }}>
              <Select.Option value={2}>超级管理员</Select.Option>
              <Select.Option value={1}>管理员</Select.Option>
            </Select>
          </Form.Item>
        </Form>
        {/* 树形菜单 */}
        <Tree
          checkable
          defaultExpandAll = { true }
          treeData={ menus }
          checkedKeys = { checkedKeys}
          onCheck={ (checkedKeys, info) => {

            setCheckedKeys(checkedKeys)
          }}
        />  
      </Modal> 
    </>
  )
}

export default AdminList
